<template>
  <div
    v-if="isShow"
    class="paintbar-menu"
    :class="`menu-size${size}`"
  >
    <div class="menu-container">
      <div class="menu-title">
        <el-input
          ref="searchInput"
          v-model="searchText"
          placeholder="搜索"
          size="mini"
          suffix-icon="el-icon-search"
          class="search-input"
        />
        <i class="el-icon-close" @click="hide" />
      </div>
      <div class="menu-content">
        <div v-show="drawList.length === 0">
          <div style="margin-left:10px;margin-top:10px;font-weight:bold">无绘图项</div>
        </div>
        <div v-for="type in drawList" :key="type.name" class="plot-type">
          <div class="plot-type-title">{{ type.name }}</div>
          <div class="plot-item-container">
            <div v-for="item in type.list" :key="item.name" :class="item.useable ? 'plot-item' : 'plot-item-disable'" @click="handlePlotItemClick(item)">
              <img :src="item.picture" alt="">
              <p class="text">{{ item.shortname }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="menu-bottom">
        <el-radio-group v-model="listType">
          <el-radio class="mb-10" :label="1">当前选择的变量</el-radio>
          <el-radio :label="2">所有绘图</el-radio>
        </el-radio-group>

        <el-button
          type="primary"
          plain
          size="mini"
          @click="openDrawListDialog"
        >绘图目录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { plot, getDrawList } from '@/utils/plot.js';
export default {
  name: 'VariableList',
  props: {
    variableList: {
      type: Array,
      default: () => []
    },
    size: {
      type: Number,
      default: 16
    }
  },
  data() {
    return {
      isShow: false,
      searchText: '',
      listType: 1
    };
  },
  computed: {
    // 获取绘图函数
    drawList: function() {
      let drawList = getDrawList(this.$store, this.searchText);
      if (this.listType === 1) {
        drawList = drawList.filter((type) => type.useable === true);
        for (let i = 0; i < drawList.length; i++) {
          drawList[i].list = drawList[i].list.filter((item) => item.useable === true);
        }// 删除当前选择变量下不可用的项
      }
      return drawList;
    }
  },
  methods: {
    handlePlotItemClick(item) {
      if (item.useable) {
        plot(this.$store, item.type);
      }
    },
    openDrawListDialog() {
      this.hide();
      this.$store.commit('matlab/showDrawList', { isShow: true });
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    }

  }
};
</script>

<style lang="scss" scoped>
.paintbar-menu{
    width: 100%;
    .menu-container{
        max-height:550px;
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;
        background-color: white;
        border: rgb(167,167,167) solid 2px;
        .menu-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height:40px;
          width:100%;
          border-bottom:rgb(228,231,237) solid 2px;
          padding:0px 10px;
          i {
            line-height: 40px;
          }
          .search-input{
            width: 50%;
            text-align: center;
          }
        }
        .menu-content{
          flex:1;
          overflow: auto;
          .plot-type{
            border-bottom:rgb(228,231,237) solid 2px;
            display: flex;
            flex-direction: column;
            padding:5px 0;
            .plot-type-title{
              margin-left: 10px;
              font-size:15px;
              color:rgb(40,40,40);
              margin-bottom: 5px;;
              font-weight: bold;
            }
            .plot-item-container{
              //background: #f0f0f0;
              //border-right: 1px solid #bdbdbd;
              display: flex;
              flex-direction: row;
              position: relative;
              .plot-item {
                cursor: pointer;
                width:80px;
                padding-right:10px;
                text-align: center;
                img {
                  height: 40px;
                  margin: 5px 10px 0;
                }
                p {
                  padding: 0;
                  margin: 0;
                }
              }
              .plot-item-disable {
                filter: grayscale(100%);
                opacity: 0.6;
                width:80px;
                padding-right:10px;
                text-align: center;
                img {
                  height: 40px;
                  margin: 5px 10px 0;
                }
                p {
                  padding: 0;
                  margin: 0;
                }
              }
              .plot-item:hover{
                background-color:rgb(240,240,240);
              }
              .plot-item:active{
                background-color:rgb(230,230,230);
              }
            }
          }
        }
        .menu-bottom{
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          height:40px;
          width:100%;
          padding:7px 10px;
        }
    }
}
</style>
